3DCGと簡単なアニメーションの作成

(A)PovRAYのダウンロード

(参考サイト:http://nishimulabo.edhs.ynu.ac.jp/~povray/beginner/p2.html

1.まずはPOV-Ray公式サイト(http://www.povray.org/)へ。

2.新しいウィンドウにPOV-Rayの公式サイトが出てきたと思います。次にダウンロード のページに移ります。公式サイトの左上に並んでいる文字の中で Download いう文字をクリックしましょう。
3,
出てきたページの中段左側に Windows と書いてある枠があると思います。 その枠内の下にある Download 32-bit (10 MB) via the web or via FTP という文字を クリックします。そうするとファイルを開くか保存するかを選択するウィンドウがでてくる と思いますので保存を選んでください。

 

(B)Suzukaでアニメを作るには

(参考サイト:http://itpro.nikkeibp.co.jp/article/COLUMN/20061221/257517/

 Suzukaを、http://www.cty-net.ne.jp/~uzgensho/ からダウンロード(サイトの下の方のリッチエディット版をダウンロード)。ただし,Suzukaを起動するには,Visual Basic 6.0のランタイム・ファイルもダウンロードする必要がある(同サイトの指示に従い,ダウンロードしてインストールしておく)。

 ダウンロードしたファイルを解凍して現れるフォルダの中から,「Suzuka.exe」のアイコンをダブルクリックすると,Suzukaが起動する。

http://itpro.nikkeibp.co.jp/article/COLUMN/20061221/257517/zu5.gif

Suzukaの画面構成は次の通りです。
http://itpro.nikkeibp.co.jp/article/COLUMN/20061221/257517/zu6s.gif

 

位置

名称

用途

(1)

シンボルリスト

Flashムービーに使用したい画像素材やスプライト,音源素材などを管理します

(2)

レイヤーリストとタイムライン

どのタイミングで,どの素材をどれだけ表示するかを管理します

(3)

編集キャンバス

素材を表示する位置や大きさなどを指定します

(4)

キーフレーム編集枠

キーフレームの情報を表示/編集します。トゥイーンアニメーションの設定から,画像の角度や大きさを数値で指定することもできます

 

 

suzukaでアニメを作る手順

step1:パラパラ漫画の画像を作る

PovRAYで作成

step2:作った画像を全てシンボルリストにドラッグ(素材の登録)
http://itpro.nikkeibp.co.jp/article/COLUMN/20061221/257517/zu8.gif

step3:シンボル(step2で移動した画像)を全てレーヤーリストにドラッグ

登録した素材のうち,表示したい物を[レイヤーリスト]へと配置します。[シンボルリスト]内から「背景用.bmp」を選択し,[レイヤーリスト]へとドラッグ&ドロップします。すると,選択した素材名が[レイヤーリスト]に表示されます

レイヤーリストへと素材を配置する(クリックで拡大表示します)
http://itpro.nikkeibp.co.jp/article/COLUMN/20061221/257517/zu9s.gif

 このとき,画面左下の[編集キャンバス]を見てみると,素材が表示されていることが確認できます。同じように「1コマ目.bmp」「2コマ目.bmp」も[レイヤーリスト]へと配置しましょう。

 これで「背景.bmp」「1コマ目.bmp」「2コマ目.bmp」が配置できました。さて,ここで[編集キャンバス]を見てみましょう。3枚の絵が重なって表示されていますね。Suzukaでは上のレイヤーの画像は前面に,下のレイヤーの画像は背面に表示され,重なり合わせて1枚の絵として表示します。

step4:キーフレームをWクリックすると移動可能になる

(キーフレームを移動し、各画像の表示時刻を指定)

表示したい位置が決まったところで,この絵を表示する長さを決定します。絵を表示するタイミングと長さを決めるには,[タイムライン]上のマーカーを操作します。

 タイムラインを見てみると,各レイヤーに赤いマーカーで示されているフレームがありますね。このフレームを「キーフレーム」と呼びます。キーフレームは,絵の表示を始める位置を表しています。キーフレームを選択し,ダブルクリックすると,マウスポインタが十字になり,位置の移動が可能な状態(編集状態)となります。この状態でタイムライン上でドラッグ&ドロップすると,キーフレームの位置に応じて表示を開始するタイミングを変更することができます。

 編集状態時にキーフレームの右端にマウスポインタを近づけると,マウスポインタの形状が左右方向の矢印になります。この状態でドラッグすると,絵を表示する長さを変更できます。

[タイムライン]上でキーフレームの位置や長さを調整する
http://itpro.nikkeibp.co.jp/article/COLUMN/20061221/257517/zu12.gif

 今回は「1コマ目.bmp」を13フレーム目に表示し,「2コマ目.bmp」を46フレーム目に表示し,「背景.bmp」は16フレーム目の間表示し続けるように指定してみました。フレームはのようになります。「1コマ目.bmp」と「2コマ目.bmp」は交互に表示されるわけですね。

編集後のタイムライン
http://itpro.nikkeibp.co.jp/article/COLUMN/20061221/257517/zu13.gif

 表示のタイミングと長さが決まったら,あらためて「1コマ目.bmp」と「2コマ目.bmp」の表示位置を調整します。それぞれの絵の表示位置は,[タイムライン]でキーフレームをクリックし,[編集キャンバス]に表示されている絵の位置や大きさ,角度などを指定します。

step5: 実行

 これでとりあえずアニメーションの完成です。[F5]キーを押してプレビューを見てみましょう。いかがですか?

Step付録:

トゥイーン機能を使って画像を移動・回転・変形させる

 画像を移動するアニメーションを作成する際に便利な機能が,「トゥイーン機能」です。トゥイーン機能は,「キーフレーム」と呼ばれる開始点と終了点を設定すると,その間の動きを保管した「トゥイーン・アニメーション」を作成してくれる機能です。

 早速トゥイーン・アニメーションを作成してみましょう。まず,「犬ランニング」レイヤーの最終フレーム(6フレーム目)を[Ctrl]キーを押しながらクリックし,「キーフレーム」を作成します。

:キーフレームの作成
zu6

 これで1フレーム目と6フレーム目に,タイムライン上で赤いマーカーで表される「キーフレーム」が作成できましたね。1フレーム目のキーフレームを選択し,[編集キャンバス]でスプライトの位置を画面の右端に移動させます。同じように,6フレーム目のキーフレームを選択し,今度は画面の左端に移動させます()。この二つのキーフレームで指定した位置が,トゥイーン・アニメーションの開始点と終了点となります。

:開始点と終了点のスプライトの位置を指定する
zu7

 位置の指定ができたところで,1フレーム目のキーフレームを選択し,画面右下の[キーフレーム編集枠]に注目してください。[トゥイーン]チェックボックスがありますね。このチェックボックスにチェックを入れると,タイムライン上の開始点から終了点の区間が赤く表示され,トゥイーン・アニメーションが設定されたことを確認できます()。

:トゥイーンの設定を行う
zu8

 この状態で[F5]キーを押してプレビュー表示してみましょう。すると,スプライトがアニメーションをしながら画面を横切っていることが確認できます。

 しかし,このままではちょっと動きが速すぎますね。そこで,トゥイーン・アニメーションの区間を伸ばしましょう。終了点のキーフレームをダブルクリックし,編集モードにしてから40フレーム目あたりまで移動させます。「背景用.bmp」のレイヤーも同じようにダブルクリックして表示区間の右端をドラッグして延長します。

 好みの長さにトゥイーン・アニメーションの区間を設定すれば,犬が画面を横切るアニメーションの完成です。

 「トゥイーン」機能を利用すれば,簡単に動きのあるFlashムービーが作成できますね。また,Suzukaのトゥイーン機能では,位置のトゥイーンだけではなく,角度,大きさ,透明度などのトゥイーンも行うことができます。

 

(これで一応完成!だが、アニメは永遠に繰り返す)

(繰り返しを止めるには)

step6:ActionScriptを記述する

 さて,ここで「ActionScript」を使ってムービーの進行を制御します。SuzukaActionScriptを記述する際には,専用の「アクションレイヤー」を作成し,そこに記入を行います。

 アクションレイヤーを追加するには,[レイヤーリスト]を右クリックして表示されるメニューから「アクションレイヤーを挿入」を選択します。すると,のようなアクションレイヤーが挿入されます。

「アクションレイヤー」の配置
http://itpro.nikkeibp.co.jp/article/COLUMN/20061222/257616/zu11.gif

 挿入したアクションレイヤーのタイムラインから,任意のフレームを[Ctrl]+クリックしてキーフレームを作成します。

step7:フレームアクションで、タイムラインの終わらせたい所にキーフレームを追加。

今回はとりあえず40フレーム目にキーフレームを作成。作成したキーフレームを選択し,[キーフレーム編集枠]の右下のほうに表示される[スクリプトを編集]ボタンを押します。するとActionScriptを記述するための,[スクリプトエディタ]が表示されます。

 

スクリプトの記述
http://itpro.nikkeibp.co.jp/article/COLUMN/20061222/257616/zu12s.gif

 ここに実行したいコードを記述していきます。今回は,メインのタイムラインの再生を止めたいので,

_root.stop();

と記述しましょう。

 

Flashムービーとして書き出してみよう

 このアニメーションをFlashムービーとして書き出してみましょう。メニューから[ファイル]-[SWFファイル生成]を選択し,任意の名前のFlashアニメーション(swfファイル)として保存します。  保存したswfファイルを,いつもFlashアニメーションを見ているブラウザなどにドラッグ&ドロップしてみると,先ほど作成したアニメーションがブラウザ上で表示されます。 作成したFlashムービーは,Flashで作成したFlashムービーと同じく,「<object>タグ」「<embed>タグ」を使ってHTML上に表示することができます。